<template>
  <div class="labelwrap">
    <el-input v-model="searchinput"
              class="w-50 m-2"
              size="large"
              placeholder="输入搜索的标签名"
              :suffix-icon="Search"
              style="width:200px;margin-left:200px" />
    <el-button type="primary"
               style="position:absolute;right:20px;top:0px;"
               @click="dialogTableVisible=true"
               round>添加标签</el-button>
    <el-table :data="labels"
              stripe
              style="width: 60%;margin: 10px auto;">
      <el-table-column type="index" />
      <el-table-column label="标签名"
                       width="180">
        <template #default="scope">
          <el-input v-model="scope.row.content"
                    :disabled="!scope.row.canedit"
                    placeholder="Please input" />
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="Operations"
                       width="180">
        <template #default="scope">
          <el-button size="small"
                     v-if="!scope.row.canedit"
                     @click="scope.row.canedit=true">编辑</el-button>
          <el-button size="small"
                     v-else
                     @click="handleEdit(scope.row)">保存</el-button>
          <el-popconfirm title="此操作会删除对应的文章,你确定吗？"
                         @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="small"
                         type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   style="width:200px;margin:10px auto"
                   layout="prev, pager, next"
                   :page-size="6"
                   v-model:current-page="start"
                   :total="total" />
  </div>
  <el-dialog v-model="dialogTableVisible"
             title="添加标签">
    <el-form :label-position="labelPosition"
             label-width="100px"
             style="max-width: 460px">
      <el-form-item label="标签名">
        <el-input v-model="addlabel" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"
                   @click="submitadd">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {
  getalllabelmanapi,
  deleteoneapi,
  editlabelapi,
  addlabelapi,
} from '@/apis/label'
import { debounce } from '@/utils'
import { ElMessage } from 'element-plus'
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
interface labelinter {
  id: number
  content: string
  canedit?: boolean
}
export default defineComponent({
  name: 'v-label',
  setup() {
    const router = useRouter()
    const dialogTableVisible = ref<boolean>(false)
    const labels = ref<labelinter[]>([]) //标签数据
    const start = ref<number>(1) //分页数据的起始
    const total = ref<number>(0) //标签总数
    const addlabel = ref<string>('') //添加的标签
    const searchinput = ref<string>('')
    const getalllabels = () => {
      getalllabelmanapi((start.value - 1) * 6, 6, searchinput.value)
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        .then((res: any) => {
          const re = res.result.map((item: labelinter) => ({
            ...item,
            canedit: false,
          }))
          labels.value = re
          total.value = res.total
        })
        .catch(() => {
          ElMessage.error('身份失效')
          router.push('/login')
        })
    }
    onMounted(() => {
      getalllabels()
    })
    watch(start, () => {
      getalllabels()
    })
    //搜索
    watch(
      searchinput,
      debounce(() => {
        getalllabels()
      })
    )
    //删除标签
    const handleDelete = async (id: number) => {
      try {
        await deleteoneapi(id)
        ElMessage.success('删除成功')
        getalllabels()
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //编辑标签
    const handleEdit = async (label: labelinter) => {
      label.canedit = false
      try {
        const { id, content } = label
        await editlabelapi(content, id)
        ElMessage.success('编辑成功')
        getalllabels()
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
    }
    //添加标签
    const submitadd = async () => {
      try {
        await addlabelapi(addlabel.value)
        ElMessage.success('添加成功')
        getalllabels()
      } catch (e) {
        ElMessage.error('身份失效')
        router.push('/login')
      }
      addlabel.value = ''
      dialogTableVisible.value = false
    }
    return {
      labels,
      start,
      handleDelete,
      searchinput,
      total,
      handleEdit,
      addlabel,
      submitadd,
      dialogTableVisible,
    }
  },
})
</script>

<style scoped lang="less">
.labelwrap {
  position: relative;
}
</style>